<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: skyblue;
        }
    </style>
</head>
<body>

<script>
    (function (w,d) {
        var bubbles = d.createElement('div');
        bubbles.classList.add('bubbles');
        d.getElementsByTagName('body')[0].appendChild(bubbles);  //把<div class="bubbles"></div>挂载到body上
        bubbles.style.cssText=`
            width: 100vw;
            height: 100vh;
            position: relative;
            overflow: hidden;
        `;
        //先拿到bubbles的宽度,然后 * Math.random() 就能随机在bubbles的范围里面的水平线出现了
        var bubblesWidth = bubbles.clientWidth;  //原来这个要先挂载了之后才能拿到宽度

        //在head中加一个style标签,即内嵌式,
        //那个link的是外链式(因为是链接)
        const base=`
            .bubble{
            width: 10px;
            height: 10px;
            border: 1px solid white;
            border-radius: 50%;
            position: absolute;
            bottom: -10%;
            }
            @keyframes up {
            from{
                bottom: -10%;
                opacity: 1;
            }
            to{
                bottom: 110%;
                opacity: .5;
            }
        }
        `;
        var style = document.createElement('style');
        style.innerHTML=base;
        document.getElementsByTagName('head')[0].appendChild(style);  //appendChild默认是加在最后一个子元素


        function bubbleUp() {
            //千万别小看这一行,innerHTML作用是覆盖之前的内容,所以这才没有一直挂载div
            bubbles.innerHTML='';
            for (let i = 0; i < 50; i++) {
                let bubble = d.createElement('div');
                bubble.classList.add('bubble');
                //${}  在js的意思应该是在字符串中网外拿值,并且只有配合``飘号才能使用,这是ES6新特性,``飘叫做反引号
                bubble.style.cssText=`
                transform: translate(${bubblesWidth * Math.random()}px,0) scale(${5 * Math.random()});
                animation: up ${10 * Math.random() + 1}s ease-in-out;
            `;
                bubbles.appendChild(bubble);
            }
        }

        bubbleUp();
        setInterval(bubbleUp, 10*1000);
    })(window,document);
</script>
</body>
</html>